<template>
  <a-button type="primary" @click="addCondition" style="margin-bottom: 10px;margin-left: 5px">添加疾病</a-button>
  <a-table :columns="columns" :data-source="state.conditions" :rowKey="record=>record.id" bordered  :scroll="{  y: 300 }">
    <template #action="record">
      <div>
        <a-popconfirm
            title="确认删除吗?"
            ok-text="Yes"
            cancel-text="No"
            @confirm="confirm(record.record.id)"
            @cancel="cancel"
        >
          <a-button href="#">删除</a-button>
        </a-popconfirm>
        <a-button type="primary" @click="edit(record.record.id)" style="float: right">编辑</a-button>
      </div>
    </template>
  </a-table>

  <a-modal
      :title="Title"
      v-model:visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk(state.condition)"
  >
    <a-form :model="state.condition" :label-col="{span: 2}" :wrapper-col="{ span: 16 }">
      <a-form-item label="id" v-if="state.condition.id == null" hidden>
        <a-input v-model:value="state.condition.id" style="width: 300px;" />
      </a-form-item>
      <a-form-item label="id" v-else>
        <a-input v-model:value="state.condition.id" disabled="true"  style="width: 300px;"/>
      </a-form-item>
      <a-form-item label="病名">
        <a-input v-model:value="state.condition.name" style="width: 300px;" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { defineComponent, onMounted, reactive, ref } from "vue";
import {
  reqGetAllCondition,
  reqGetConditionById,
  reqUpdateConditionById,
  reqDeleteConditionById,
  reqAddCondition
} from "../api/index";
import { message } from "ant-design-vue";
const columns = [
  {
    title: "id",
    dataIndex: "id",
    key: "id",
    align: 'center',
  },
  {
    title: "病名",
    dataIndex: "name",
    key: "name",
    align: 'center',
  },
  {
    title: "操作",
    dataIndex: "",
    width: 200,
    key: "x",
    fixed: 'right',
    align: 'center',
    slots: {
      customRender: "action",
    },
  },
];
export default defineComponent({
  setup() {
    const Title = ref('')
    const state = reactive({
      conditions: [],
      condition: {},
      type: "",
    });
    const modalText = ref("Content of the modal");
    const visible = ref(false);
    const confirmLoading = ref(false);
    const addCondition = () => {
      state.type = "add";
      Title.value = "添加疾病类型";
      visible.value = true;
      state.condition = {};
    };
    const handleOk = async (condition) => {
      modalText.value = "please wait for sometime";
      confirmLoading.value = true;
      if (state.type==="update") {
        let result = await reqUpdateConditionById(condition);
        if (result.code === 200) {
          visible.value = false;
          confirmLoading.value = false;
          let result = await reqGetAllCondition();
          state.conditions = result.data;
          state.condition = {};
        }
      } else if (state.type==="add") {
        let result = await reqAddCondition(condition)
        if (result.code === 200) {
          visible.value = false;
          confirmLoading.value = false;
          let result = await reqGetAllCondition();
          state.conditions = result.data;
          state.condition = {};
        }
      }
    };
    const edit = async (id) => {
      let result = await reqGetConditionById(id);
      state.type = "update";
      Title.value = "修改疾病类型";
      state.condition = result.data;
      visible.value = true;
    };
    const confirm = async (id) => {
      let result = await reqDeleteConditionById(id);
      if (result.code === 200) {
        message.success("删除成功");
        let result = await reqGetAllCondition();
        state.conditions = result.data;
      }
    };

    const cancel = (e) => {
      console.log(e);
      message.error("Click on No");
    };
    onMounted(async () => {
      let result = await reqGetAllCondition();
      console.log(result)
      state.conditions = result.data;
    });
    return {
      Title,
      state,
      columns,
      edit,
      modalText,
      visible,
      confirmLoading,
      handleOk,
      confirm,
      cancel,
      addCondition
    };
  },
});
</script>
